<script setup>
import GoodsView from "./GoodsView.vue";
import OrderView from "./OrderView.vue";
import AccView from "./AccView.vue";
import SalesView from "./SalesView.vue";
import ShopView from "./ShopView.vue";
import HomeView from "./HomeView.vue";
// 引入卡片组件
import CardItem from "../components/CardItem.vue";
import { ref } from "vue";
// 侧边菜单
const navs = ref([
  { id: "HomeView", icon: "shouye", title: "后台首页", component: HomeView },
  { id: "OrderView", icon: "liwu", title: "订单管理", component: OrderView },
  { id: "GoodsView", icon: "gouwu", title: "商品管理", component: GoodsView },
  { id: "ShopView", icon: "baoxian", title: "店铺管理", component: ShopView },
  { id: "AccView", icon: "shezhi", title: "账号管理", component: AccView },
  { id: "SalesView", icon: "shuju", title: "销售统计", component: SalesView },
]);
// 当前显示的组件，默认是后天首页
const currentComp = ref(HomeView);

// 侧边栏点击事件
const handleNavChange = (comp) => {
  console.log(comp);

  currentComp.value = comp;
};

// 卡片数据
const cardList = ref([
  { id: 0, title: "总订单", count: 5486, icon: "zizhi", color: "green" },
  {
    id: 0,
    title: "总销售额",
    count: 2045821,
    icon: "jiankong",
    color: "green",
  },
  { id: 0, title: "今日订单数", count: 180, icon: "yanse", color: "green" },
  { id: 0, title: "今日销售额", count: 3521, icon: "saomiao", color: "green" },
]);
</script>
<template>
  <div id="layout">
    <div class="layout-sidebar">
      <div class="logo">
        <img src="../assets/image/man.jpg" alt="" class="avatar" />
      </div>
      <ul class="layout-sidebar-navs">
        <li
          class="iconfont"
          v-for="nav in navs"
          :class="'icon-' + nav.icon"
          @click="handleNavChange(nav.component)"
        >
          {{ nav.title }}
        </li>
        <!-- <li class="iconfont icon-shouye">订单管理</li>
        <li class="iconfont icon-shouye">商品管理</li>
        <li class="iconfont icon-shouye">店铺管理</li>
        <li class="iconfont icon-shouye">账号管理</li>
        <li class="iconfont icon-shouye">销售统计</li> -->
      </ul>
    </div>
    <div class="layout-main">
      <div class="layout-main-breadcrumb">面包屑</div>
      <div class="layout-main-content">
        <!-- 卡片封装 -->
        <div class="cards">
          <CardItem
            v-for="card in cardList"
            :key="card.id"
            :card="card"
          ></CardItem>
        </div>
        <div class="eacharts">图表</div>
      </div>
      <component :is="currentComp"></component>
    </div>
  </div>
</template>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
#layout {
  display: flex;
  .layout-sidebar {
    flex: 0 0 200px;
    height: 100vh;
    background-color: bisque;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    padding-top: 50px;
    text-align: center;
    .layout-sidebar-navs {
      display: flex;
      flex-direction: column;
      height: 300px;
      justify-content: space-between;
      padding: 0;
      li {
        list-style: none;
      }
    }

    .avatar {
      width: 50px;
      height: 50px;
    }
  }
  .layout-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100vh;
    background-color: rgb(244, 255, 196);
    .layout-main-breadcrumb {
      flex: 0 0 50px;
      background-color: rgb(215, 250, 239);
    }
    .layout-main-content {
      flex: 1;
      .cards {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        height: 100px;
        background-color: rgb(234, 215, 250);
      }
      .eacharts {
      }
    }
  }
}
</style>
